<template>
  <div>
    <div class="viewContain">
      <!-- 搜索栏 -->
      <div class="search">
        <van-search v-model="listQuery.data" shape="round" background="#fff" show-action placeholder="输入职位/企业" @search="handleSearch" @clear="clearInput">
          <template #action />
        </van-search>
        <div class="searchTitle" @click="handleSearch">搜索</div>
        <div class="searchTitle" @click="selectParams">筛选</div>
      </div>
      <!-- 多条件搜索面板 -->
      <div class="actionSheet">
        <van-action-sheet v-model="isShowSheet" title="筛选条件">
          <div class="content">
            <!-- 地区 -->
            <div class="education">
              <div class="title">
                <span>地区</span>
              </div>
              <div class="list">
                <div v-for="(item, index) in areaList" :key="item.id" :class="item.isActive?'active':'item'" @click="handleChooseArea(index, item.id)">{{ item.name }}</div>
              </div>
            </div>
            <!-- 薪酬 -->
            <div class="education">
              <div class="title">
                <span>薪酬</span>
              </div>
              <div class="list">
                <div v-for="(item, index) in salaryList" :key="item.id" :class="item.isActive?'active':'item'" @click="handleChooseSalary(index, item.id)">{{ item.msg }}</div>
              </div>
              <div class="salaryEdit" style="padding:10px;">
                <div class="edit" style="font-size:14px;">自定义：</div>
                <div class="low">
                  <van-form ref="form">
                    <van-field
                      v-model="salaryBeginValue"
                      label=""
                      placeholder="最低"
                      @focus="focus"
                    />
                  </van-form>
                </div>
                <div class="edit">—</div>
                <div class="high">
                  <van-form ref="form">
                    <van-field
                      v-model="salaryEndValue"
                      label=""
                      placeholder="最高"
                    />
                  </van-form>
                </div>
                <div class="edit">K</div>
              </div>
            </div>
            <!-- 职位 -->
            <div class="education">
              <div class="title">
                <span>职位</span>
              </div>
              <div class="list">
                <div v-for="(item, index) in jobIntentionList" :key="item.id" :class="item.isActive?'active':'item'" @click="handleChooseJob(index, item.id)">{{ item.msg }}</div>
              </div>
            </div>
            <!-- 学历 -->
            <div class="education">
              <div class="title">
                <span>学历要求</span>
              </div>
              <div class="list">
                <div
                  v-for="(item, index) in educationList"
                  :key="item.id"
                  :class="item.isActive?'active':'item'"
                  @click="selectEducate(index, item.code)"
                >
                  {{ item.msg.length > 4 ? item.msg.slice(0,4) + '...' : item.msg }}
                </div>
              </div>
            </div>
            <!-- 经验 -->
            <div class="experience">
              <div class="title">
                <span>经验要求</span>
              </div>
              <div class="list">
                <div
                  v-for="(item, index) in experienceList"
                  :key="item.id"
                  :class="item.isActive?'active':'item'"
                  @click="selectExperience(index, item.code)"
                >
                  {{ item.msg }}
                </div>
              </div>
            </div>
            <!-- 行业 -->
            <div class="industry">
              <div class="title">
                <span>行业</span>
              </div>
              <div class="list">
                <div
                  v-for="(item, index) in industryList"
                  :key="item.id"
                  :class="item.isActive?'active':'item'"
                  @click="selectIndustry(index, item.code)"
                >
                  <!-- {{ item.msg }} -->
                  {{ item.msg.length > 4 ? item.msg.slice(0,4) + '...' : item.msg }}
                </div>
              </div>
            </div>
            <!-- 公司规模 -->
            <div class="scale">
              <div class="title">
                <span>公司规模</span>
              </div>
              <div class="list">
                <div
                  v-for="(item, index) in scaleList"
                  :key="item.id"
                  :class="item.isActive?'active':'item'"
                  @click="selectScale(index, item.code)"
                >
                  {{ item.msg.length > 4 ? item.msg.slice(0,7) + '...' : item.msg }}
                </div>
              </div>
            </div>
            <div class="operateButton">
              <div class="clear">
                <van-button color="#ff9d3b" type="warning" block @click="handleClear('more')">重置</van-button>
              </div>
              <div class="confirm">
                <van-button color="#16b887" type="primary" block @click="handleConfirm('more')">确认</van-button>
              </div>
            </div>
          </div>
        </van-action-sheet>
      </div>
      <!-- 条件下拉框 -->
      <van-dropdown-menu active-color="#16b887">
        <van-dropdown-item ref="area" title="全部地区">
          <div class="chooseItem">
            <div v-for="(item, index) in areaList" :key="item.id" :class="item.isActive?'active':'item'" @click="handleChooseArea(index, item.id)">{{ item.name }}</div>
          </div>

          <div class="operateButton">
            <div class="clear">
              <van-button color="#ff9d3b" type="warning" block @click="handleClear('area')">重置</van-button>
            </div>
            <div class="confirm">
              <van-button color="#16b887" type="primary" block @click="handleConfirm('area')">确认</van-button>
            </div>
          </div>
        </van-dropdown-item>
        <van-dropdown-item ref="job" title="全部职位">
          <div class="chooseItem">
            <div v-for="(item, index) in jobIntentionList" :key="item.id" :class="item.isActive?'active':'item'" @click="handleChooseJob(index, item.id)">{{ item.msg }}</div>
          </div>
          <div class="operateButton">
            <div class="clear">
              <van-button color="#ff9d3b" type="warning" block @click="handleClear('jobItem')">重置</van-button>
            </div>
            <div class="confirm">
              <van-button color="#16b887" type="primary" block @click="handleConfirm('jobItem')">确认</van-button>
            </div>
          </div>
        </van-dropdown-item>
        <van-dropdown-item ref="salary" title="全部薪酬">
          <div class="chooseItem">
            <div v-for="(item, index) in salaryList" :key="item.id" :class="item.isActive?'active':'item'" @click="handleChooseSalary(index, item.id)">{{ item.msg }}</div>
          </div>
          <div class="salaryEdit">
            <div class="edit">自定义：</div>
            <div class="low">
              <van-form ref="form">
                <van-field
                  v-model="salaryBeginValue"
                  label=""
                  placeholder="最低"
                  @focus="focus"
                />
              </van-form>
            </div>

            <div class="edit">—</div>
            <div class="high">
              <van-form ref="form">
                <van-field
                  v-model="salaryEndValue"
                  label=""
                  placeholder="最高"
                />
              </van-form>
            </div>
            <div class="edit">K</div>
          </div>
          <div class="operateButton">
            <div class="clear">
              <van-button color="#ff9d3b" type="warning" block @click="handleClear('salary')">重置</van-button>
            </div>
            <div class="confirm">
              <van-button color="#16b887" type="primary" block @click="handleConfirm('salary')">确认</van-button>
            </div>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
      <div class="jobList">
        <van-list
          v-if="jobList.length"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          :offset="10"
          @load="onLoad"
        >
          <div v-for="item in jobList" :key="item.id" class="jobItem">
            <div class="top">
              <div class="jobName">
                <van-checkbox v-model="item.isChecked" :disabled="item.delivery" checked-color="#16B887" style="margin-right: 5px;" @click="selectItem(item.id)" />
                <span>{{ item.name }}</span>
              </div>
              <div v-if="item.salaryName" class="jobSalary">{{ item.salaryName }}</div>
              <div v-else class="jobSalary">暂无数据</div>

            </div>
            <div class="center" @click="handleToDetail(item.id, item.entId)">
              <div class="jobAttribute">{{ item.experienceName }}</div>
              <div class="jobAttribute">{{ item.city }} {{ item.area }} {{ item.street }} {{ item.community }}</div>
              <div v-if="item.functionType" class="jobAttribute">
                <span v-for="item1 in item.functionType.split(',')" :key="item1">{{ item1 }}</span>
              </div>
            </div>
            <div class="bottom" @click="handleToDetail(item.id, item.entId)">
              <div class="companyName">
                <!-- <div><img src="../../assets/companyLogo.png" alt=""></div> -->
                <!-- <div>{{ item.entName.length > 14 ? item.entName.slice(0,14) + '...' : item.entName }}</div> -->
                <div>{{ item.entName }}</div>
              </div>
              <div v-if="item.publish" class="companyAddress">{{ item.publish.slice(0,10) }}</div>
              <div v-else class="companyAddress">暂无数据</div>
            </div>
          </div>
        </van-list>
      </div>
      <div class="bottomSelect">
        <div class="allSelect" @click="selectAllDiv">
          <van-checkbox v-model="checked" checked-color="#ccc" icon-size="18px" @click="selectAll" />
          <!-- <span style="margin-left: 10px;">全选({{ selectNum }}/{{ currentList.length }})</span> -->
          <span style="margin-left: 10px;">全选({{ selectNum }}/10)</span>
        </div>
        <div class="allSelect" style="border:none" @click="allDelivery">批量投递</div>
      </div>
    </div>
    <TabBar :msg-num="msgNum" />
  </div>
</template>

<script>
import TabBar from '@/components/TabBar'
import { jobList } from '@/moker/jobData.js'
export default {
  name: 'job',
  components: {
    TabBar
  },
  data () {
    return {
      msgNum: 1,
      value: 0,
      isShowNoData: false,
      isShowSheet: false,
      jobList: [],
      loading: false, // 加载中
      finished: false, // 加载完成
      listQuery: {
        page: 1,
        size: 10,
        areaCodes: [], // 区域编码 不限传空
        keywords: [], // 职位类型
        salarys: [], // 薪酬
        educations: [], // 学历要求
        experiences: [], // 经验要求
        categoryCodes: [], // 行业
        scaleCodes: [], // 规模
        data: '', // 搜索框条件
        // onlyCollegeGraduates: '', // 是否只面向高校毕业生：0-否；1-是
        // onlyRegionCollaboration: '', // 是否只面向东西部劳务：0-否；1-是
        // salaryBegin: '',
        // salaryEnd: '',
        userId: ''
      },
      dataTotal: 0,
      locationArea: '广州市', // 默认筛选位置
      areaList: [
        { isActive: false, name: '平湖街道', id: 440307001 },
        { isActive: false, name: '布吉街道', id: 440307002 },
        { isActive: false, name: '坂田街道', id: 440307003 },
        { isActive: false, name: '南湾街道', id: 440307004 },
        { isActive: false, name: '横岗街道', id: 440307005 },
        { isActive: false, name: '龙岗街道', id: 440307006 },
        { isActive: false, name: '龙城街道', id: 440307007 },
        { isActive: false, name: '坪地街道', id: 440307008 },
        { isActive: false, name: '吉华街道', id: 440307009 },
        { isActive: false, name: '园山街道', id: 440307010 },
        { isActive: false, name: '宝龙街道', id: 440307012 }
      ], // 龙岗下面的地区
      jobIntentionList: [
        { isActive: false, msg: '教育培训', id: 100001 },
        { isActive: false, msg: '影视/传媒', id: 100002 },
        { isActive: false, msg: '咨询/翻译', id: 100003 },
        { isActive: false, msg: '生活服务', id: 100004 },
        { isActive: false, msg: '管培生', id: 100005 },
        { isActive: false, msg: '非企业从业人员', id: 100006 },
        { isActive: false, msg: '销售', id: 100007 },
        { isActive: false, msg: '人事行政', id: 100008 },
        { isActive: false, msg: '财务', id: 100009 },
        { isActive: false, msg: '法务法律', id: 100010 },
        { isActive: false, msg: '运营客服', id: 100011 },
        { isActive: false, msg: '生产制造', id: 100012 },
        { isActive: false, msg: '能源环保', id: 100013 },
        { isActive: false, msg: '医疗健康', id: 100014 },
        { isActive: false, msg: '电子/通信', id: 100015 },
        { isActive: false, msg: '房地产/建筑', id: 100016 }
      ], // 全部职位下拉
      salaryList: [
        { isActive: false, msg: '2100-3000', id: 1001 },
        { isActive: false, msg: '3000-5000', id: 1002 },
        { isActive: false, msg: '5000-8000', id: 1003 },
        { isActive: false, msg: '8000-10000', id: 1004 },
        { isActive: false, msg: '10000-15000', id: 1005 },
        { isActive: false, msg: '15000-20000', id: 1006 },
        { isActive: false, msg: '20000以上', id: 1007 }
      ], // 全部薪酬下拉
      educationList: [
        { isActive: false, msg: '不限', code: 101 },
        { isActive: false, msg: '小学及以上', code: 102 },
        { isActive: false, msg: '初中', code: 103 },
        { isActive: false, msg: '中专', code: 104 },
        { isActive: false, msg: '高中', code: 105 },
        { isActive: false, msg: '大专', code: 106 },
        { isActive: false, msg: '本科', code: 107 },
        { isActive: false, msg: '硕士以上', code: 108 },
        { isActive: false, msg: '其他', code: 109 }
      ], // 学历
      experienceList: [
        { isActive: false, msg: '不限', code: 1001 },
        { isActive: false, msg: '无要求', code: 1002 },
        { isActive: false, msg: '应届生', code: 1003 },
        { isActive: false, msg: '1年以内', code: 1004 },
        { isActive: false, msg: '1-3年', code: 1005 },
        { isActive: false, msg: '3-5年', code: 1006 },
        { isActive: false, msg: '5-10年', code: 1007 },
        { isActive: false, msg: '10年以上', code: 1008 }
      ], // 经验
      industryList: [
        { isActive: false, msg: '不限', code: 2001 },
        { isActive: false, msg: '金融', code: 2002 },
        { isActive: false, msg: '物流', code: 2003 },
        { isActive: false, msg: '文化', code: 2004 },
        { isActive: false, msg: '新能源', code: 2005 },
        { isActive: false, msg: '互联网', code: 2006 },
        { isActive: false, msg: '服务类', code: 2007 }
      ], // 行业
      scaleList: [
        { isActive: false, msg: '不限', code: 3001 },
        { isActive: false, msg: '10人以下', code: 3002 },
        { isActive: false, msg: '10-99人', code: 3003 },
        { isActive: false, msg: '100-499人', code: 3004 },
        { isActive: false, msg: '500-999人', code: 3005 },
        { isActive: false, msg: '1000-2999人', code: 3006 },
        { isActive: false, msg: '3000以上', code: 3007 }
      ], // 企业规模
      salaryBeginValue: '', // 自定义薪资开始
      salaryEndValue: '', // 自定义薪资结束
      isNumber: /^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/,
      checked: false,
      isChecked: false,
      selectNum: 0,
      currentList: []
    }
  },
  mounted () {
    this.getJobList()
  },
  methods: {
    // 职位列表
    getJobList () {
      console.log(jobList)
      const res = jobList
      this.$toast.loading({
        message: '加载中...',
        duration: 0,
        forbidClick: true
      })
      setTimeout(() => {
        if (res.code === 0) {
          console.log('进入')
          const list = res.data.list // 请求返回当页的列表
          this.currentList = list
          this.loading = false
          this.dataTotal = res.data.total
          if (list == null || list.length === 0) {
          // 加载结束
            this.finished = true
            this.$toast.clear()
            this.isShowNoData = true
            return
          }
          list.forEach(item => {
            var salaryStr = ''
            var beginInt = item.salaryBegin
            var endInt = item.salaryEnd
            item.isChecked = false
            salaryStr = beginInt * 1000 + ' - ' + endInt * 1000
            item.salaryName = salaryStr
          })
          // 将新数据与老数据进行合并
          this.jobList = this.jobList.concat(list)
          console.log(this.jobList)
          // 如果列表数据条数>=总条数，不再触发滚动加载
          if (this.jobList.length >= this.dataTotal) {
            this.finished = true
            this.isShowNoData = false
          }
          this.$toast.clear()
        }
      }, 500)
      // searchPositionByCondition(this.listQuery).then(res => {
      //   console.log('res===职位列表', res)
      //   this.$toast.loading({
      //     message: '加载中...',
      //     duration: 0,
      //     forbidClick: true
      //   })
      //   if (res.data.code === 0) {
      //     const list = res.data.data.list // 请求返回当页的列表
      //     this.currentList = list
      //     // const list = []
      //     this.loading = false
      //     this.dataTotal = res.data.data.total
      //     if (list == null || list.length === 0) {
      //     // 加载结束
      //       this.finished = true
      //       this.$toast.clear()
      //       this.isShowNoData = true
      //       return
      //     }
      //     list.forEach(item => {
      //       var salaryStr = ''
      //       var beginInt = item.salaryBegin
      //       var endInt = item.salaryEnd
      //       item.isChecked = false
      //       salaryStr = beginInt * 1000 + ' - ' + endInt * 1000
      //       item.salaryName = salaryStr
      //     })
      //     // 将新数据与老数据进行合并
      //     this.jobList = this.jobList.concat(list)
      //     // 如果列表数据条数>=总条数，不再触发滚动加载
      //     if (this.jobList.length >= this.dataTotal) {
      //       this.finished = true
      //       this.isShowNoData = false
      //     }
      //     this.$toast.clear()
      //   }
      // })
    },
    // 筛选查询条件
    selectParams () {
      this.isShowSheet = true
    },
    // 输入搜索
    handleSearch () {
      this.jobList = []
      this.loading = false
      this.finished = false
      this.listQuery.page = 1
      this.listQuery.size = 10
      this.dataTotal = 0
      console.log('搜索列表：', this.listQuery)
      this.getJobList()
    },
    // vant-list触底事件
    onLoad () {
      console.log('触底了~', 'this.loading===,', this.loading)
      this.listQuery.page++
      this.getJobList()
    },
    handleToDetail () {
      console.log('职位详情')
    },
    clearInput () {
      location.reload()
    },
    selectItem (val) {
      const judge = this.jobList.every(item => item.isChecked)
      if (judge) {
        this.checked = true
      } else {
        this.checked = false
      }
      this.getSelectNum()
    },
    selectAllDiv () {},
    // 全选
    selectAll () {
      console.log('全选===', this.jobList)
      console.log('this.checked===', this.checked)
      console.log('this.currentList===', this.currentList)
      if (this.checked) {
        this.jobList.forEach(item => {
          console.log('this.jobList===', this.jobList)
          console.log('this.currentList===', this.currentList)

          this.currentList.forEach(item1 => {
            if (!item.delivery) {
              if (item.id === item1.id) {
                console.log(item)
                item.isChecked = true
              }
            }
          })
        })
        this.$forceUpdate()
      } else {
        console.log('111')
        this.jobList.forEach(item => {
          item.isChecked = false
        })
        this.$forceUpdate()
      }
      const judge = this.currentList.some(item => item.isChecked)
      if (judge) {
        this.currentList.forEach(item => {
          if (!item.delivery) {
            item.isChecked = true
          }
        })
      }
      this.getSelectNum()
    },
    // 批量投递
    allDelivery() {
      if (this.selectNum === 0) {
        this.$toast('请勾选职位!')
        return
      }
      if (this.selectNum > 10) {
        this.$toast('最多只能勾选10条!')
        return
      }
      let allSelectIds = []
      allSelectIds = this.jobList.filter(item => item.isChecked)
      console.log('获取所有被勾选的职位id===', allSelectIds)
      const data = []
      allSelectIds.forEach(item => {
        data.push({
          entId: item.entId,
          positionId: item.id,
          userId: this.listQuery.userId
        })
      })
      // this.$toast.loading({
      //   message: '投递中...',
      //   forbidClick: true
      // })
      // deliverys(data).then(res => {
      //   console.log('res投递结果===', res)
      //   if (res.data.code === 0) {
      //     // this.deliverySuccess()
      //     this.$toast('批量投递成功')
      //     setTimeout(() => {
      //       location.reload()
      //     }, 1000)
      //   } else {
      //     this.$toast(res.data.msg)
      //   }
      // }).catch(err => {
      //   console.log('err===', err)
      //   this.$toast('服务故障,请联系管理员')
      // })
    },
    // 统计勾选数量
    getSelectNum () {
      const selectNum = this.jobList.filter(item => item.isChecked)
      this.selectNum = selectNum.length
      console.log('统计勾选数量===', this.selectNum)
      if (this.selectNum >= 10) {
        this.checked = true
        this.selectNum = 10
      }
    },
    // 选择全部地区街道
    handleChooseArea (index, id) {
      console.log('选择的街道id===', id)
      this.areaList.forEach((item, indexTabs) => {
        if (indexTabs === index) {
          item.isActive = !item.isActive
        }
      })
      this.$forceUpdate()
    },
    // 选择职位
    handleChooseJob (index, id) {
      console.log('选择的职位id===', id)
      this.jobIntentionList.forEach((item, indexTabs) => {
        if (indexTabs === index) {
          item.isActive = !item.isActive
        }
      })
      this.$forceUpdate()
    },
    // 选择薪酬
    handleChooseSalary (index, id) {
      console.log('选择的薪酬id===', id)
      this.salaryList.forEach((item, indexTabs) => {
        if (indexTabs === index) {
          item.isActive = !item.isActive
        }
      })
      this.$forceUpdate()
    },
    // 切换学历
    selectEducate (index, educationCode) {
      console.log(index)
      this.educationList.forEach((item, indexTabs) => {
        if (indexTabs === index) {
          item.isActive = !item.isActive
        }
      })
      this.$forceUpdate()
    },
    // 切换经验
    selectExperience (index, experienceCode) {
      console.log(index)
      this.experienceList.forEach((item, indexTabs) => {
        if (indexTabs === index) {
          item.isActive = !item.isActive
        }
      })
      this.$forceUpdate()
    },
    // 切换行业
    selectIndustry (index, entCategoryCode) {
      console.log(index)
      this.industryList.forEach((item, indexTabs) => {
        if (indexTabs === index) {
          item.isActive = !item.isActive
        }
      })
      this.$forceUpdate()
    },
    // 切换公司规模
    selectScale (index, entScaleCode) {
      console.log(index)
      this.scaleList.forEach((item, indexTabs) => {
        if (indexTabs === index) {
          item.isActive = !item.isActive
        }
      })
      this.$forceUpdate()
    },
    focus () {
      console.log('焦点...')
      this.salaryList.forEach(item => {
        item.isActive = false
      })
      this.$forceUpdate()
    },
    // 多条件重置
    handleClear (type) {
      switch (type) {
        case 'area':
          this.areaList.forEach(item => {
            item.isActive = false
          })
          this.$forceUpdate()
          break
        case 'jobItem':
          this.jobIntentionList.forEach(item => {
            item.isActive = false
          })
          this.$forceUpdate()
          break
        case 'salary':
          this.salaryList.forEach(item => {
            item.isActive = false
          })
          this.salaryBeginValue = ''
          this.salaryEndValue = ''
          this.$forceUpdate()
          break
        case 'more':
          this.educationList.forEach(item => {
            item.isActive = false
          })
          this.experienceList.forEach(item => {
            item.isActive = false
          })
          this.industryList.forEach(item => {
            item.isActive = false
          })
          this.scaleList.forEach(item => {
            item.isActive = false
          })
          // 地区
          this.areaList.forEach(item => {
            item.isActive = false
          })
          // 薪酬
          this.salaryList.forEach(item => {
            item.isActive = false
          })
          this.salaryBeginValue = ''
          this.salaryEndValue = ''
          // 职位
          this.jobIntentionList.forEach(item => {
            item.isActive = false
          })
          this.$forceUpdate()
          break
        default:
          break
      }
      // location.reload()
      // this.handleConfirm(type)
    },
    // 筛选确定
    handleConfirm (type) {
      console.log('点击确定===')
      switch (type) {
        case 'area':
          this.listQuery.areaCodes = []
          this.areaList.forEach(item => {
            if (item.isActive === true) {
              this.listQuery.areaCodes.push(item.id)
            }
          })
          this.$refs.area.toggle()
          break
        case 'jobItem':
          this.listQuery.keywords = []
          this.jobIntentionList.forEach(item => {
            if (item.isActive === true) {
              this.listQuery.keywords.push(item.code)
            }
          })
          this.$refs.job.toggle()
          break
        case 'salary':
          console.log('1111====')
          this.listQuery.salarys = []
          // 自定义的薪资范围
          console.log(this.salaryBeginValue, '-----------', this.salaryEndValue, this.salaryBeginValue % 1 !== 0)
          if (this.salaryBeginValue || this.salaryEndValue) {
            if (this.salaryBeginValue % 1 !== 0 || this.salaryEndValue % 1 !== 0) {
              this.$toast('请规范输入,工资区间值应为整数!')
              return
            } else if (parseInt(this.salaryBeginValue) > parseInt(this.salaryEndValue)) {
              console.log(this.salaryBeginValue, '-----------', this.salaryEndValue)
              this.$toast('请规范输入,最低工资不得高于最高工资!')
              return
            } else {
              this.listQuery.salarys.push({ salaryBegin: this.salaryBeginValue, salaryEnd: this.salaryEndValue })
            }
          } else { // 筛选的薪资范围
            this.salaryList.forEach(item => {
              console.log('item===', item)
              if (item.isActive === true) {
                this.listQuery.salarys.push({ salaryBegin: item.category[0] ? item.category[0] : 0, salaryEnd: item.category[1] ? item.category[1] : 0 })
              }
              // if (item.isActive === true) {
              //   console.log('被选中的item===', item)
              //   this.listQuery.salarys.push(item.code)
              // }
            })
          }
          this.salaryBeginValue = ''
          this.salaryEndValue = ''
          this.$refs.salary.toggle()
          break
        case 'more':
          this.listQuery.educations = []
          this.listQuery.experiences = []
          this.listQuery.categoryCodes = []
          this.listQuery.scaleCodes = []
          this.educationList.forEach(item => {
            if (item.isActive === true) {
              this.listQuery.educations.push(item.code)
            }
          })
          this.experienceList.forEach(item => {
            if (item.isActive === true) {
              this.listQuery.experiences.push(item.code)
            }
          })
          this.industryList.forEach(item => {
            if (item.isActive === true) {
              this.listQuery.categoryCodes.push(item.code)
            }
          })
          this.scaleList.forEach(item => {
            if (item.isActive === true) {
              this.listQuery.scaleCodes.push(item.code)
            }
          })
          if (this.educationList[0].isActive === true) {
            this.listQuery.educations = []
          }
          if (this.experienceList[0].isActive === true) {
            this.listQuery.experiences = []
          }
          if (this.industryList[0].isActive === true) {
            this.listQuery.categoryCodes = []
          }
          if (this.scaleList[0].isActive === true) {
            this.listQuery.scaleCodes = []
          }
          // 地区
          this.listQuery.areaCodes = []
          this.areaList.forEach(item => {
            if (item.isActive === true) {
              this.listQuery.areaCodes.push(item.id)
            }
          })
          // 薪酬
          this.listQuery.salarys = []
          // 自定义的薪资范围
          if (this.salaryBeginValue || this.salaryEndValue) {
            if (this.salaryBeginValue % 1 !== 0 || this.salaryEndValue % 1 !== 0) {
              this.$toast('请规范输入,工资区间值应为整数!')
              return
            } else if (parseInt(this.salaryBeginValue) > parseInt(this.salaryEndValue)) {
              console.log(this.salaryBeginValue, '-----------', this.salaryEndValue)
              this.$toast('请规范输入,最低工资不得高于最高工资!')
              return
            } else {
              this.listQuery.salarys.push({ salaryBegin: this.salaryBeginValue, salaryEnd: this.salaryEndValue })
            }
          } else { // 筛选的薪资范围
            this.salaryList.forEach(item => {
              if (item.isActive === true) {
                this.listQuery.salarys.push({ salaryBegin: item.category[0], salaryEnd: item.category[1] })
              }
              // if (item.isActive === true) {
              //   console.log('被选中的item===', item)
              //   this.listQuery.salarys.push(item.code)
              // }
            })
          }
          this.salaryBeginValue = ''
          this.salaryEndValue = ''
          // 职位
          this.listQuery.keywords = []
          this.jobIntentionList.forEach(item => {
            if (item.isActive === true) {
              this.listQuery.keywords.push(item.code)
            }
          })
          this.isShowSheet = false
          break
        default:
          break
      }
      console.log('筛选后的this.listQuery===', this.listQuery)
      // this.jobList = []
      this.handleSearch()
    }
  }
}
</script>

<style lang="less">
.viewContain {
  box-sizing: border-box;
  padding: 101px 12px calc(112px + env(safe-area-inset-bottom));
  min-height: 100vh;
  background-color: #f8f8f8;
  justify-content: space-around;
  .search {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
    display: flex;
    background: white;
    align-items: center;
    .van-search {
      padding: 10px 0 5px 12px;
      flex: 1;
    }
    // .searchItem {
    //   display: flex;
    //   justify-content: space-between;
    //   .searchTitle {
    //     font-size: 16px;
    //     font-weight: bold;
    //     color: #16B887;
    //     & + .searchTitle {
    //       margin-left: 10px;
    //     }
    //   }
    // }
    .searchTitle {
      font-size: 16px;
      font-weight: bold;
      color: #16B887;
      height: 100%;
      & + .searchTitle {
        margin-left: 10px;
        margin-right: 16px;
      }
      &:active{ box-shadow: 0px 0px 50px;}
    }
  }
  .actionSheet {
    .content, .content1 {
      padding: 0 20px 80px;
      .salary {
        span {
          font-size: 16px;
          margin-left: 2px;
        }
      }
      .salay, .education, .experience, .industry, .scale, .positionOne {
        .title {
          margin: 15px 0;
          span {
            font-size: 16px;
            margin-left: 2px;
          }
        }
        .list {
          display: flex;
          justify-content: flex-start;
          flex-flow: wrap;
          font-size:14px;
          .item, .active {
            width: 90px;
            background-color: #f8f8f8;
            border-radius: 5px;
            margin: 0 8px 8px 0;
            padding: 10px 5px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .active {
            color: #16B887;
          }
        }
        // 滚动
        .list1 {
          height: 300px;
          overflow-y: auto;
          display: flex;
          justify-content: flex-start;
          flex-flow: wrap;
          font-size:14px;
          .item, .active {
            width: 80px;
            background-color: #f8f8f8;
            border-radius: 5px;
            margin: 0 8px 8px 0;
            padding: 10px 5px;
            border: 1px solid #ccc;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .active {
            color: #16B887;
          }
        }
      }

      .operateButton {
        background-color: #fff;
        box-sizing: border-box;
        padding: 10px 10px 30px;
        height: 80px;
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        .clear {
          float: left;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 48%;
          height: 100%;
          background-color: #fff;
        }
        .confirm {
          float: right;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 48%;
          height: 100%;
          color: #fff;
        }
      }
    }
    .content1 {
      padding: 0 20px 300px;
    }
  }

  .jobList {
    .jobItem {
      .top {
        .jobName {
          display: flex;
          // justify-content: center;
          align-items: center;
        }
      }
    }
  }

  .bottomSelect {
    background-color: #16B887;
    height: 50px;
    position: fixed;
    bottom: 50px;
    left: 0;
    right: 0;
    display: flex;
    // justify-content: space-around;
    // align-items: center;
    color: #fff;
    font-size: 15px;
    .allSelect {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      border-right: 1px solid #fff;
    }
  }
  .van-dropdown-menu {
    position: fixed;
    top: 49px;
    left: 0;
    width: 100%;
    z-index: 8;
    /deep/ .van-dropdown-menu__bar {
      height: 40px;
    }
  }
  .chooseItem {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 10px 0 0 20px;
    .item, .active {
      width: 100px;
      padding: 10px 2px;
      font-size: 13px;
      color: #666;
      background-color: #eee;
      border-radius: 5px;
      margin: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .active {
      color: #16b887;
    }
  }
  .salaryEdit {
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .edit {
      font-size: 15px;
      // font-weight: bold;
    }
    .low, .high {
      margin: 0 10px;
      width: 80px;
      border: 1px solid #ccc;
      /deep/ .van-cell {
        padding: 0;
      }
    }
  }

  /deep/ .van-field__control {
    text-align: center;
  }
  .operateButton {
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 20px;
    height: 60px;
    width: 100%;
    .clear {
      float: left;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 45%;
      height: 100%;
      background-color: #fff;
    }
    .confirm {
      float: right;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 45%;
      height: 100%;
      color: #fff;
    }
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .jobList {
    .jobItem {
      background: #fff;
      padding: 12px;
      border-radius: 6px;
      margin-bottom: 12px;
      .top {
        display: flex;
        .jobName {
          color: #333333;
          flex: 1;
          min-width: 0;
          font-size: 18px;
          margin-right: 10px;
          overflow: hidden;
          white-space: nowrap;
          -ms-text-overflow: ellipsis;
          text-overflow: ellipsis;
        }
        .jobSalary {
          color: #FF9D3B;
          font-size:18px;
        }
      }
      .center {
        .jobAttribute {
          margin: 5px 0;
          color: #666;
          font-size: 14px;
          line-height: 1.4;
          span {
            display: inline-block;
            vertical-align: top;
            padding: 2px 6px;
            font-size: 12px;
            border-radius: 5px;
            // background-color: #16b887;
            // color: #fff;
            background-color: #f6faff;
            color: #16B887;
            margin: 2px 4px 2px 0;
          }
        }
      }
      .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #666;
        .companyName {
          display: flex;
          font-size: 14px;
          // color:#16B887;
          // background-color: #f6faff;
          border-radius: 2px;
          // color: #aeaeae;
          img {
            border-radius: 50%;
            margin-right: 5px;
            width: 20px;
            height: 20px;
          }
        }
        .companyAddress {
          font-size: 13px;
          color: #aeaeae;
        }
      }
    }
  }
}
</style>
